<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload,
		onHide
	} from '@dcloudio/uni-app';
	import {
		getDanCiApi,
		endWorldStudyApi
	} from '../../api/request.js';
	import {
		includeListGetItem
	} from '../../utils/index.js';
	const props = defineProps({});
	// 1美 2英
	const type = ref(2);
	onMounted(() => {
		if (uni.getStorageSync('bofangmoshi')) {
			type.value = uni.getStorageSync('bofangmoshi');
		}
	});
	let platform = uni.getStorageSync('platform');
	const goback = async () => {
		uni.navigateBack();
	};
	onHide(() => {
		uni.$emit('pause');
	});
	onUnload(() => {
		uni.$emit('pause');
	});
	const tijiao = async () => {
		uni.showLoading({
			mask: true
		});
		center.value.close();
		let res = await endWorldStudyApi({
			wordpackage_id: query.value.id,
			correct_word_id: query.value.hui,
			error_word_id: query.value.word_ids
		});

		uni.hideLoading();
		console.log(res);
		uni.showToast({
			title: res.msg,
			icon: 'none',
			duration: 1200
		});
		setTimeout(() => {
			if (res.code == 1) {
				uni.redirectTo({
					url: '/pages/world/jianzhihe?id=' + query.value.word_ids
				});
			}
		}, 1200);
	};
	const query = ref({
		word_ids: '',
		hui: '',
		index: 0
	});
	const list = ref([]);
	onLoad(async (e) => {
		query.value.word_ids = e.buhui;
		query.value.hui = e.hui;
		query.value.id = e.id;
	});
	onShow(async () => {
		let res = await getDanCiApi(query.value);
		list.value = res.data;
		console.log(list.value);
	});

	const playIndex = ref(-1);
	const shunxu = ref(false);
	const changePlayAudio = () => {
		if (playIndex.value == 4) shunxu.value = true;
		if (playIndex.value == 0) shunxu.value = false;
		if (shunxu.value) {
			playIndex.value -= 1;
		} else {
			playIndex.value += 1;
		}
		let item = list.value[query.value.index * 5 + playIndex.value];
		playAudio(item.id, item.detail.audio_file_name.word);
	};
	const onclick = (e) => {
		let index = query.value.index * 5 + e.index;
		if (e.item.action == '1') {
			// 拓展
			uni.navigateTo({
				url: '/pages/common/tuozhan?id=' + list.value[index].name
			});
		} else if (e.item.action == '2') {
			// 拼读
			uni.navigateTo({
				url: '/pages/common/pindu?id=' + list.value[index].name
			});
		} else {
			uni.navigateTo({
				url: '/pages/carpam/index?id=' + list.value[index].name
			});
			// 手机摄像头拍照
		}
	};
	const btnGroup = ref([{
			name: '拓展',
			action: '1',
			style: {
				fontSize: '32rpx',
				width: '144rpx',
				height: '52rpx',
				color: '#fff',
				bgColor: '#29B6FC'
			}
		},
		{
			name: '拼读',
			action: '2',
			style: {
				fontSize: '32rpx',
				width: '144rpx',
				height: '52rpx',
				color: '#fff',
				bgColor: '#FA862C'
			}
		},
		{
			name: '纠错',
			action: '3',
			style: {
				fontSize: '32rpx',
				width: '144rpx',
				height: '52rpx',
				color: '#fff',
				bgColor: '#668CFF'
			}
		}
	]);
	const select = ref('');
	const changeSelect = (e) => {
		select.value = e;
	};

	const center = ref(null);
	const change = (index) => {
		if (index == 2) {
			center.value.open('center');
		}
	};
	const last = () => {
		query.value.index = query.value.index == 0 ? 0 : query.value.index - 1;
		playIndex.value = -1;
		shunxu.value = false;
	};
	const next = () => {
		playIndex.value = -1;
		query.value.index =
			query.value.index == Math.ceil(list.value.length / 5) - 1 ?
			list.value.length / 5 - 1 :
			query.value.index + 1;
		shunxu.value = false;
	};
	//最后点击的是谁
	const nowIndex = ref(null);
	//被点击过都在里面
	const getIdList = ref([]);
	//点击过是第几次点击
	const statusList = ref({});
	const playAudio = (id, url, status = false) => {
		let http =
			type.value == 1 ?
			'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_word/' :
			'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/';
		console.log(`https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/${url}`);
		uni.$emit('playAudio', http + `${url}`, true);
		nowIndex.value = id;
		//剪纸盒子的骡子
		const indexs = getIdList.value.findIndex((item) => item == id);
		if (indexs == -1) {
			getIdList.value.push(id);
		}
		const index = statusList.value.id == id;
		if (!index) {
			statusList.value.id = id;
			statusList.value.status = 1;
			dianjihaishizuohua.value = status;
		} else {
			statusList.value.status =
				statusList.value.status == 1 ?
				2 :
				statusList.value.status == 2 ?
				3 :
				statusList.value.status == 3 ?
				1 :
				1;
		}
	};

	const dianjihaishizuohua = ref(false);
	const returnItemClassStatus = (id) => {
		//第一种情况
		if (nowIndex.value) {
			//第二种情况存在
			let index = includeListGetItem(getIdList.value, id);
			if (index == -1) {
				return 'none';
			} else {
				// 第三种 展示音标
				const zhege = statusList.value.id == id;
				if (zhege) {
					let num = statusList.value.status;
					//第一次点击
					if (num == 1) {
						if (!dianjihaishizuohua.value) {
							return 'heide';
						} else {
							return 'yinbiaos';
						}
						//第二次点击
					} else if (num == 2) {
						if (!dianjihaishizuohua.value) {
							return 'heides';
						} else {
							return 'fanyi';
						}
					} else if (num == 3) {
						// 说明是第三次
						return 'kong';
					} else if (num == 4) {
						if (!dianjihaishizuohua.value) {
							return 'heide';
						} else {
							return 'yinbiaos';
						}
						// 说明还是你
					} else if (nowIndex.value == id) {
						if (!dianjihaishizuohua.value) {
							return 'heide';
						} else {
							return 'yinbiaos';
						}
					} else {
						return 'daiyanse';
					}
				} else {
					// return 'zhanshi';
					return 'none';
				}
			}
		} else {
			//黑 谁都没有过 最开始的样子
			return 'none';
		}
	};
	const returnStatus = (id) => {
		const index = statusList.value.id == id;
		if (index) {
			const status = statusList.value.status;
			if (status === 1) {
				return 'buyaoyinbiao';
			} else if (status === 2) {
				return 'active';
			} else if (status === 3) {
				return 'zheli';
			}
		}
		return '';
	};
	const startValue = ref(0);
	const endValue = ref(0);
	const minDistance = 60;
	const handleTouchStart = (event) => {
		startValue.value = event.touches[0].clientX;
	};
	const touchend = (event) => {
		if (startValue.value == 0) {
			return;
		}
		endValue.value = event.changedTouches[0].clientX;
		let distance;
		distance = endValue.value - startValue.value;
		if (distance < minDistance) {
			return;
		} else {
			const item = list.value.find((item) => item.id == event.currentTarget.id);
			statusList.value = {};
			playAudio(item.id, item.detail.audio_file_name.word, true);
		}
	};
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<view class="lefts uni-row">
				<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
				<view class="title"> 单词识记 </view>
			</view>
			<view class="right uni-row">
				<view class="item uni-row" v-for="(item, index) in ['剪纸盒', '打印', '结束训练']" :key="index"
					:class="index == 0 ? 'active' : index == 1 ? 'default' : 'end'" :style="{
                        display: index == 0 ? 'none' : 'flex',
                        marginLeft: getIdList.length == list.length ? '12rpx' : '36rpx'
                    }" @click="change(index)">
					{{ item }}
				</view>
			</view>
		</view>
		<view class="body" v-if="list && list.length">
			<view class="item uni-row" :id="item.id" @touchstart="handleTouchStart" @touchend="touchend"
				v-for="(item, index) in list.slice(query.index * 5, (query.index + 1) * 5)" :key="index"
				:class="returnItemClassStatus(item.id)" @click="playAudio(item.id, item.detail.audio_file_name.word)"
				:style="{ height: (platform.gaodu - platform.dingbu - 96 - 160) / 5 + 'rpx' }">
				<next-swipe-action :btnGroup="btnGroup" :index="index" @btnClick="onclick" :select="select"
					@changeSelect="changeSelect">
					<view class="uni-row nei" :style="{
                            height: (platform.gaodu - platform.dingbu - 96 - 160) / 5 + 'rpx'
                        }">
						<view class="lefts">
							<view class="uni-row fa" v-if="item.detail">
								<view class="left yingwen" v-for="(i, iIndex) in item.detail.s_split" :key="index"
									:class="iIndex % 2 == 0 ? 'actives' : 'defaults'">
									{{ Object.keys(i)[0] }}
								</view>
							</view>
							<view class="center yinbiao">
								/{{ type == 1 ? item.detail.us : item.detail.uk }}/
								<!-- :
								<view class="yinbiao " v-for="(item,index) in item.detail.tran_memo" :key="index">
									{{ item }}
								</view> -->
							</view>
						</view>
						<view class="fanti">
							{{ item.detail.youdao_api.translation[0] }}
						</view>
					</view>
				</next-swipe-action>
			</view>
		</view>
		<view class="nothing" v-if="list && list.length < 1">
			<image src="/static/img/nothing.png" class="img"></image>
			<view class="label"> 哎呀，这里什么内容都没有 </view>
		</view>
	</view>
	<image src="/static/img/laba.png" mode="widthFix" class="shengyin" @click="changePlayAudio"></image>
	<view class="footers uni-row" v-if="list.length > 5">
		<view class="icon uni-row" @click="last">
			<image src="/static/img/wolrd/last.png" class="last"></image>
		</view>
		<view class="liang"> {{ query.index + 1 }} / {{ Math.ceil(list.length / 5) }} </view>
		<view class="icon uni-row" @click="next">
			<image src="/static/img/wolrd/next.png" class="next"></image>
		</view>
	</view>
	<uni-popup ref="center">
		<view class="wai">
			<view class="title"> 温馨提示 </view>
			<view class="label"> 确定要结束训练吗?</view>
			<view class="footer uni-row">
				<view class="fou bt" @click="center.close()"> 否 </view>
				<view class="shi bt" @click="tijiao"> 是 </view>
			</view>
		</view>
	</uni-popup>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 28rpx;

			.lefts {
				.left {
					width: 48rpx;
					margin-right: 32rpx;
				}

				.title {
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.right {
				.item {
					justify-content: center;
					margin-left: 12rpx;
					font-size: 24rpx;
					color: #ffffff;
					width: 144rpx;
					height: 52rpx;
					border-radius: 8rpx;

					&.active {
						display: none;
						background-color: #29b6fc;
					}

					&.default {
						background-color: #fa862c;
					}

					&.end {
						background-color: #9561f3;
					}
				}
			}
		}

		.body {
			// padding: 0 28rpx;

			.item {
				height: 196rpx;
				// margin-bottom: 16rpx;
				// border-radius: 8rpx;
				overflow: hidden;
				background-color: #fff;
				border-bottom: 1rpx solid #bcbcbc;

				.nei {
					// height: 196rpx;
					width: 100%;
					padding: 0 28rpx;
					justify-content: space-between;
					border-radius: 8rpx;
					font-size: 42rpx;

					.lefts {
						.center {
							display: none;
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #999999;
						}
					}

					.fanti {
						font-size: 28rpx;
						color: #333333;
						opacity: 0;
						transition: 0.2s all;
					}
				}

				&.heide {
					.lefts {
						.fa {
							.left {
								font-weight: 600;
								font-size: 50rpx;
							}
						}
					}
				}

				&.heides {
					.lefts {
						.fa {
							.left {
								font-weight: 600;
								font-size: 50rpx;
							}
						}
					}

					.fanti {
						opacity: 1;
					}
				}

				&.yinbiaos {
					.lefts {
						.fa {
							.left {
								font-weight: 600;
								font-size: 50rpx;

								&.actives {
									color: #222868;
								}

								&.defaults {
									color: #fa862c;
								}
							}
						}

						.center {
							display: flex;
						}
					}
				}

				&.fanyi {
					.lefts {
						.fa {
							.left {
								font-size: 50rpx;
								font-weight: 600;

								&.actives {
									color: #222868;
								}

								&.defaults {
									color: #fa862c;
								}
							}
						}

						.center {
							display: flex;
						}
					}

					.fanti {
						opacity: 1;
					}
				}

				&.kong {
					.nei {
						opacity: 0;
					}
				}

				&.cu {
					.lefts {
						.fa {
							.left {
								font-size: 50rpx;
								font-weight: 600;

								&.actives {
									color: #222868;
								}

								&.defaults {
									color: #fa862c;
								}
							}
						}
					}
				}

				&.zhanshi {
					.lefts {
						.fa {
							.left {
								&.actives {
									color: #222868;
								}

								&.defaults {
									color: #fa862c;
								}
							}
						}
					}
				}
			}

			.btn-area {
				.btn-item {
					justify-content: center;
					width: 148rpx;
					height: 116rpx;
					color: #fff;
					font-size: 32rpx;

					&.active {
						background: #29b6fc;
					}

					&.default {
						background-color: #ff9e30;
					}
				}
			}
		}
	}

	.shengyin {
		position: fixed;
		right: 28rpx;
		bottom: 26rpx;
		width: 60rpx;
	}

	.footers {
		position: fixed;
		left: 50%;
		bottom: 28rpx;
		transform: translate(-50%, 0);
		justify-content: center;

		.liang {
			font-size: 24rpx;
			color: #333333;
			// margin: 0 26rpx;
		}

		.icon {
			justify-content: center;
			padding: 0 26rpx;
		}

		.last,
		.next {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.wai {
		width: 606rpx;
		height: 378rpx;
		background: #f4eeff;
		border-radius: 64rpx;
		padding: 48rpx 96rpx;
		text-align: center;
		color: #333333;

		.title {
			font-size: 32rpx;
		}

		.label {
			font-size: 28rpx;
			margin: 36rpx 0 56rpx;
		}

		.footer {
			justify-content: space-between;

			.bt {
				width: 184rpx;
				height: 68rpx;
				font-size: 24rpx;
				line-height: 68rpx;
				border-radius: 36rpx;
			}

			.fou {
				color: #9561f3;
				border: 2rpx solid #9561f3;
			}

			.shi {
				background: #9561f3;
				color: #fff;
			}
		}
	}
</style>